<template>

  <div class="salary-container">


    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
        <el-breadcrumb-item>员工信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>普通员工信息</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row>
      <el-form label-width="120">

        <el-row>
          <el-col :span="8">
            <el-form-item label="员工姓名">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="员工编号">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学历">
              <el-select></el-select>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>

          <el-col :span="8">
            <el-form-item label="部门">
              <el-select></el-select>
            </el-form-item>

          </el-col>


          <el-col :span="8">
            <el-form-item label="职务">
              <el-select></el-select>
            </el-form-item>

          </el-col>

          <el-col :span="8">

            <el-form-item>

              <el-button type="primary">搜索</el-button>

            </el-form-item>
          </el-col>

        </el-row>

      </el-form>

    </el-row>
    <el-row>

       <el-button-group>
         <el-button type="danger" @click="btnEditClick">登记扣款</el-button>
       </el-button-group>

      <el-table :data="state.tableData">
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="name" label="员工姓名" width="100"></el-table-column>
        <el-table-column prop="empNO" label="编号" width="100"></el-table-column>
        <el-table-column prop="dept.val" label="部门" width="100"></el-table-column>
        <el-table-column prop="job.val" label="职务"></el-table-column>
        <el-table-column prop="salary_should" label="应发工资"></el-table-column>
        <el-table-column prop="salary_qu" label="迟到早退"></el-table-column>
        <el-table-column prop="salary_safe" label="保险扣除"></el-table-column>

        <el-table-column label="实发工资">
          <template #default="scope">

            {{ scope.row.salary_should - scope.row.salary_qu -scope.row.salary_safe}}
          </template>

        </el-table-column>


        <el-table-column label="操作">
           <template #default="scope">

             <el-button type="danger" @click="btnEditClick(scope.row)">登记扣款</el-button>
           </template>

        </el-table-column>

      </el-table>

    </el-row>



     <el-dialog
         v-model="state.dialogVisible"
         title="登记扣款"
         width="30%"
     >


        登记扣款

     </el-dialog>
  </div>

</template>

<script setup>

import {reactive,onMounted} from "vue";
import axios from 'axios'

const state = reactive({
  tableData: [],
  dialogVisible:false
})


axios({
  url: 'http://test/salary/nor',
  dataType: 'json',
  method: 'get'
}).then((res) => {
  state.tableData = res.data;

  console.log(res.data);
})



function btnEditClick(row){

     state.dialogVisible=true;
}


</script>

<style scoped>

.salary-container {
  padding: 5px;
}

</style>